<template>
	<view class="chat">
		<scroll-view :style="{height: `${windowHeight}rpx`}" id="scrollview" scroll-y="true" :scroll-top="scrollTop"
			:scroll-with-animation="true" class="scroll-view">
			<!-- 聊天主体 -->
			<view id="msglistview" class="chat-body">
				<view class="item Ai">
					<!-- 头像 -->
					<view class="avatar">
						<image src="../../static/logo.png" mode="aspectFill"></image>
					</view>
					<!-- 文字内容 -->
					<view class="content left">
						你好，有什么可以帮助你的吗？
					</view>
				</view>
				<!-- 聊天记录 -->
				<view v-for="(item,index) in msgList" :key="index">
					<view v-if="index%2==0">
						<!-- 自己发的消息 -->
						<view class="item self">
							<!-- 文字内容 -->
							<view class="content right">
								{{item}}
							</view>
							<!-- 头像 -->
							<view class="avatar">
								<image :src="userInfo.avatar ? userInfo.avatar : '../../static/user.png' "
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view v-else>
						<!-- 机器人发的消息 -->
						<view class="item Ai">
							<!-- 头像 -->
							<view class="avatar">
								<image src="../../static/logo.png" mode="aspectFill"></image>
							</view>
							<!-- 文字内容 -->
							<view class="content left">
								{{item}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
		<!-- 底部消息发送栏 -->
		<!-- 用来占位，防止聊天消息被发送框遮挡 -->
		<view class="send-msg">
			<uni-easyinput ref="uipt" @iconClick="handleSend" suffixIcon="paperplane" @confirm="handleSend"
				placeholder="提一个问题吧~比如:心脏病 苯中毒 感冒怎么办" v-model="chatMsg">
			</uni-easyinput>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		GetStroage
	} from "@/utils/tool.js"
	import {
		checkToken
	} from "@/api/user.js"
	export default {
		data() {
			return {
				chatMsg: "",
				ansMsg: "",
				windowHeight: 1800,
				scrollTop: 20,
				questionCnt: 0,
				MsgList: {
					type: "success",
					message: "获取验证码成功"
				},
				msgList: [],
				userInfo: null,
			}
		},
		onShow() {
			this.questionCnt = 0;
			this.userInfo = GetStroage("userInfo");
		},
		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.MsgList.type = type;
				this.MsgList.message = msg;
				this.$refs.uToast.show({
					...this.MsgList
				})
			},
			//px转换成rpx
			rpxTopx(px) {
				let deviceWidth = wx.getSystemInfoSync().windowWidth
				let rpx = (750 / deviceWidth) * Number(px)
				return Math.floor(rpx)
			},
			//滚动至聊天底部
			scrollToBottom() {
				//外层加一个延时函数是为了能获取到节点的准确信息
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					//获取节点信息
					query.select('#scrollview').boundingClientRect();
					query.select('#msglistview').boundingClientRect();
					query.exec((res) => {
						if (res[1].height > res[0].height) {
							this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
						}
					})
				}, 15)
			},
			async getAnswer(str) {
				console.log('查询答案中！');
				return new Promise((resolve, reject) => {
					uni.request({
						url: str,
						success: res => {
							console.log(res);
							resolve(res.data.answer);
						},
						fail: (err) => {
							reject("很抱歉，这个问题我还不会😭"); //请求有问题直接抛出异常
						}
					})
				})
			},
			//发送消息
			handleSend() {
				console.log(this.chatMsg);
				if (this.chatMsg == "") {
					this.fillMsg("error", "问题不能为空！");
					return;
				} else {
					//token验证
					let token = GetStroage("token");
					if (token) {
						checkToken({
							Token: token
						}).then(res => {
							console.log("请求API接口【/user/checkToken】", res);
							if (res.data.result == false) {
								this.fillMsg("error", "身份过期/异常，请重新登录！");
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/login"
									})
								}, 1500)
							} else {
								this.send();
							}
						})
					} else {
						this.fillMsg("error", "请先登录！");
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 1500)
					}
				}
			},
			async send() {
				if (this.msgList.length % 2 != 0) {
					this.fillMsg("error", "等WTcrazyAI回答完再问吧~")
				} else {
					this.msgList.push(this.chatMsg);
					if (this.chatMsg == "感冒怎么办") {
						this.ansMsg = "感冒可以尝试如下治疗：对症治疗;中医治疗;支持性治疗";
					} else if (this.chatMsg == "苯中毒") {
						this.ansMsg =
							"苯中毒,熟悉一下：苯(benzene)是从煤焦油分馏及石油裂解所得的一种芳香烃化合物，系无色有芳香气味的油状液体。挥发甚速，易燃易爆。工业上用作溶剂、稀释剂和化工原料。苯属中等毒类，可引起急性或慢性中毒。急性苯中毒是指口服含苯的有机溶剂或吸入高浓度苯蒸气后，出现以中枢神经系统麻醉作用为主要表现的病理生理过程，主要症状轻者为醉酒状，步态不稳，哭笑失常，重者意识丧失，抽搐，可因呼吸中枢麻痹或循环衰竭死亡。慢性苯中毒是指苯及其代谢产物酚类影响了骨髓的造血功能，临床表现为白细胞计数和血小板立秋持续减少，最终发展为再生障碍性贫血或白血病。也可影响神经系统，表现为神经衰弱和自主神经功能紊乱。";
					} else if (this.chatMsg == "心脏病") {
						this.ansMsg =
							"心脏病,熟悉一下：心脏病(heartdisease)是心脏疾病的总称，包括风湿性心脏病、先天性心脏病、高血压性心脏病、冠心病、心肌炎等各种心脏病。一、 先天性心脏病1. 可能由于母亲在怀孕早期的疾病或服用的药物有关。2. 与遗传有关。二、 后天性心脏病1. 冠状动脉心脏病： 抽烟及糖尿病， 高血压等导致血管硬化狭窄， 使血流受阻， 易使心肌缺氧而受损。2. 高血压性心脏病： 动脉性高血压导致左心室肥大， 肺高压症导致右心室肥大。三、 风湿性心脏病： 慢性风湿性心脏病主要在风湿热感染后， 心脏瓣膜逐渐病变所导致之异常。四、 肺性心脏病： 因慢性支气管炎， 肺气肿等导致肺动脉高血压症， 使得右心室肥大或衰竭。五、 心肌病： 新陈代谢或荷尔蒙异常的心肌变化等， 有时酗酒， 药物亦导致心肌变化。六、 心脏肿瘤： 大多为良性肿瘤， 以黏液瘤为最常见， 原发性心脏恶性肿瘤很少见。 ";
					} else {

						console.log("查询次数：" + this.questionCnt);
						console.log('chatmsg==' + this.chatMsg);
						//如果消息不为空或者不为空白字符（包括换行符、空格等）
						// if (!this.chatMsg || /^\s+$/.test(this.chatMsg)) {
						let URL = "http://" + this.$e.IP + ":5000/query/question?content=" + this.chatMsg; //本地机运行
						console.log('url:' + URL);
						let str = (this.questionCnt == 0 ? "第一次查询时间稍长 请耐心等待..." : "查询中 请稍后...")
						uni.showLoading({
							title: str
						})
						// console.log(str);
						if (this.chatMsg == '你叫什么名字') {
							this.ansMsg = '我叫WTcrazyAI，希望你身体健康呀😋';
							this.questionCnt = this.questionCnt - 1;
						} else if (this.chatMsg == '谢谢你') {
							this.ansMsg = 'You are welcome~'
						} else {
							await this.getAnswer(URL).then((res) => {
								this.ansMsg = res
							}).catch((err) => {
								this.ansMsg = "很抱歉,这个问题我还不会😭"
							})
						}
						uni.hideLoading(); //
					}
					this.msgList.push(this.ansMsg);
					this.chatMsg = '';
					this.scrollToBottom()
					console.log('下面是msgList');
					console.log(this.msgList);
					this.chatMsg = "";
					this.questionCnt = this.questionCnt + 1;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	$chatContentbgc: #C2DCFF;
	$sendBtnbgc: #4F7DF5;

	view,
	button,
	text,
	input,
	textarea {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* 聊天消息 */
	.chat {
		.scroll-view {
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			// background-color: orange;
			margin-bottom: 200rpx;

			.chat-body {
				display: flex;
				flex-direction: column;
				padding-top: 23rpx;
				// background-color:skyblue;

				.self {
					justify-content: flex-end;
				}

				.item {
					display: flex;
					padding: 23rpx 30rpx;
					// background-color: greenyellow;

					.right {
						background-color: $chatContentbgc;
					}

					.left {
						background-color: #FFFFFF;
					}

					// 聊天消息的三角形
					.right::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						left: 100%;
						top: 10px;
						border: 12rpx solid transparent;
						border-left: 12rpx solid $chatContentbgc;
					}

					.left::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						top: 10px;
						right: 100%;
						border: 12rpx solid transparent;
						border-right: 12rpx solid #FFFFFF;
					}

					.content {
						position: relative;
						max-width: 486rpx;
						border-radius: 8rpx;
						word-wrap: break-word;
						padding: 24rpx 24rpx;
						margin: 0 24rpx;
						border-radius: 5px;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
					}

					.avatar {
						display: flex;
						justify-content: center;
						width: 78rpx;
						height: 78rpx;
						background: $sendBtnbgc;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							align-self: center;
							width: 100%;
							height: 100%;
						}

					}
				}
			}
		}

		/* 底部聊天发送栏 */
		.send-msg {
			margin: 0rpx 0rpx 0 10rpx;
			width: 100%;
			padding: 0 21rpx 0 0;
			position: fixed;
			left: 0;
			bottom: 49px;
			z-index: 100;
		}
	}
</style>
